<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <script src="layui/layui.js" charset="utf-8"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="js/jquery-2.1.0.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test">
<!--    <button type="button" class="layui-btn layui-btn-warm" id="btn" lay-event="ins">添加</button>-->
</table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="ins">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>



<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>



    layui.use(["table","form"], function(){
        var table = layui.table;
        var form=layui.form;



        table.render({
            elem: '#test'
            ,url:'/users'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left', width:"5%"}
                ,{field:'id', title:'ID', width:"5%", fixed: 'left', unresize: true, sort: true}
                ,{field:'username', title:'用户名', width:"40%",align: "center"}
                ,{field:'gender', title:'性别', width:"10%",  templet:function(res){
                        var sex="";
                        if (res.gender==0){
                            sex="女";
                        }else if (res.gender!=0){
                            sex="男";
                        }
                        return "<span>"+sex+"</span>";
                    }}
                ,{field:'registTime', title:'日期', width:"20%",  sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:"20%"}
            ]]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                ,curr: 1 //设定初始在第 1 页
                ,groups: 1 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页

            }
            ,page: true    //分页啊啊啊啊啊啊啊啊啊啊！！！
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'ins':
                    layerIns=layer.open({
                        type: 1,  //说明弹出的是页面
                        title:"用户信息修改",   //标题
                        content:$("#user_form2"),   //绑定的页面是哪一个
                        shade:false,         //不显示遮罩
                        anim: 5,    //弹出动画:渐显
                        resize:false,         //- 是否允许拉伸 false不允许拉伸
                    });
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;


            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除此条数据么', function(index){//index不为空时是确认键
                    // alert(index); 测index的值
                    if (index>0){
                        $.ajax({
                            url: '/deluser/'+data.id,
                            type:"delete",
                            success:function (ret) {
                                if(ret.status=="ok"){
                                    // layer.close(index);//关闭这个弹窗
                                    layer.msg("删除成功！！！");
                                    setTimeout('deldos()',500);
                                    setTimeout('f5()', 1000);
                                    // location.reload();//重启页面
                                    obj.del();//删除这一行
                                }else{
                                    layer.msg("凉凉了~~~~~");
                                }

                            }
                        });
                        return false;
                    }else{

                    }
                    // obj.del();//删除这一行
                });
            } else if(obj.event == 'edit'){
                 data1 = obj.data;
                 form.val("user_form",data1); //数据回显 把数据给filter

                layerUpd=layer.open({
                    type: 1,  //说明弹出的是页面
                    title:"用户信息修改",   //标题
                    content:$("#user_form1"),   //绑定的页面是哪一个
                    shade:false,         //不显示遮罩
                    anim: 5,    //弹出动画:渐显
                    resize:false,         //- 是否允许拉伸 false不允许拉伸
                });

            }

        });
        //修改时的form的Ajax
        form.on('submit(submit1)',function (data) {
            $.ajax({
                url: '/upuser',
                type:"put",
                data:JSON.stringify(data.field),
                contentType:"application/json",
        success:function (ret) {
                    if(ret.status=="ok"){
                        layer.msg("修改成功");
                        setTimeout('deldos()',500);
                        setTimeout('f5()', 1000);
                    }else{
                        layer.msg("修改失败");
                    }

                }
            });
            return false;
        })
        //新增时的form的Ajax
        form.on('submit(submit2)',function (data) {
            $.ajax({
                url: '/insertuser',
                type:"post",
                data:JSON.stringify(data.field),
                contentType:"application/json",
                success:function (ret) {
                    if(ret.status=="ok"){
                        layer.msg("添加成功");
                        setTimeout('deldos()',500);
                        setTimeout('f5()', 1000);
                    }else{
                        layer.msg("凉了~~~");
                    }

                }
            });
            return false;
        })



    });


    function f5(){
        window.location.reload();
    }
    function deldos() {
        layer.closeAll();
    }

</script>








<!--弹出的表格隐藏的 用id属性找到-->



<div style="display: none ;padding-right: 50px;padding-top: 20px "  id="user_form1">
    <form class="layui-form" lay-filter="user_form" id="userForm">

        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input type="text" name="id"  autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username"  placeholder="输入用户名" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="1" title="男" checked>
                <input type="radio" name="gender" value="0" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">注册时间</label>
            <div class="layui-input-block">
                <input type="date" name="registTime" lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>

        <!--<div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" value="1" title="有效" checked>
                <input type="radio" name="state" value="0" title="失效">
            </div>
        </div>-->

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit  lay-filter="submit1">提交</button>
            </div>
        </div>

    </form>
</div>

<div style="display: none ;padding-right: 50px;padding-top: 20px "  id="user_form2">
    <form class="layui-form" lay-filter="user_form" id="userForm2">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username"  placeholder="输入用户名" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="1" title="男" checked>
                <input type="radio" name="gender" value="0" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">注册时间</label>
            <div class="layui-input-block">
                <input type="date" name="registTime" lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit  lay-filter="submit2">提交</button>
            </div>
        </div>

    </form>
</div>








</body>
</html>